<template>
	<view>
		<view class="pyg_order">
		  <!-- 顶部tab栏开始 -->
		  <Tabs :tabs="tabs" @mytab="handleTabsChange" />
		  <!-- 顶部tab栏结束 -->
		  <view v-if="tabs[0].isActive">
		    <!-- 全部订单开始 -->
		    <view class="order_list">
		      <view class="order_list_item" v-for="(item,index) in orders" :key="index">
		        <view class="order_number_sec">
		          <view class="text">订单编号</view>
		          <view class="content">{{item.order_number}}</view>
		        </view>
		        <view class="order_price_sec">
		          <view class="text">订单金额</view>
		          <view class="content">￥{{item.order_price}}</view>
		        </view>
		        <view class="order_date_sec">
		                  <view class="text">订单日期</view>
		          <view class="content">￥{{item.create_time_cn}}</view>
		        </view>
		      </view>
		    </view>
		    <!-- 全部订单结束 -->
		  </view>
		  <view v-else-if="tabs[1].isActive">
		    2
		  </view>
		  <view v-else>
		    3
		  </view>
		
		</view>
	</view>
</template>

<script>
	import Tabs from "@/components/Tabs.vue"
	import { request } from "@/request/request.js"
	export default {
		components:{
			Tabs
		},
		data() {
			return {
				    orders: [],
				    tabs: [{
				      id: 0,
				      text: "全部",
				      isActive: true,
				      type: 1,
				    }, {
				      id: 1,
				      text: "待付款",
				      isActive: false,
				      type: 2,
				    }, {
				      id: 2,
				      text: "待发货",
				      isActive: false,
				      type: 3, //订单类型
				    }]
			};
		},
		onLoad:function(options){
			   this.getOrderList();
		},
		methods:{
			  //获取订单数据
			  getOrderList: async function() {
			    //找到现在被激活的菜单
			    let activeTab = this.tabs.filter(v => v.isActive);
			    // 请求 拿到对应 type 的数据
			    let res = await request({
			      url: "my/orders/all",
				  header:{
					  "Authorization":uni.getStorageSync("token")
				  },
			      data: {
			        type: activeTab[0].type
			      }
			    })
				this.orders = res.message.orders.map(v => ({
				  ...v,
				  create_time_cn: (new Date(v.create_time * 1000).toLocaleString())
				}))
			  },
			  //tabs 菜单的监听事件 用于子向父传值
			  handleTabsChange(tabs) {
			    tabs.map((v, index) => v.type = index + 1);
				this.tabs = tabs;
			  }
		}
	}
</script>

<style lang="less">
.pyg_order .order_list {
  height: 100vh;
  background-color: #f9f9f9;
}
.pyg_order .order_list .order_list_item {
  height: 250rpx;
  border-bottom: 13rpx solid #f9f9f9;
}
.pyg_order .order_list .order_list_item .order_number_sec {
  padding: 32rpx 32rpx 0 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pyg_order .order_list .order_list_item .order_number_sec .text {
  font-size: 30rpx;
  color: #696969;
}
.pyg_order .order_list .order_list_item .order_number_sec .content {
  font-size: 30rpx;
  color: #696969;
}
.pyg_order .order_list .order_list_item .order_price_sec {
  padding: 32rpx 32rpx 0 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pyg_order .order_list .order_list_item .order_price_sec .text {
  font-size: 30rpx;
  color: #696969;
}
.pyg_order .order_list .order_list_item .order_price_sec .content {
  font-size: 30rpx;
  color: var(--themeColor);
}
.pyg_order .order_list .order_list_item .order_date_sec {
  padding: 32rpx 32rpx 0 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pyg_order .order_list .order_list_item .order_date_sec .text {
  font-size: 30rpx;
  color: #696969;
}
.pyg_order .order_list .order_list_item .order_date_sec .content {
  font-size: 30rpx;
  color: #696969;
}

</style>